<template>
  <el-carousel :interval="3000" arrow="always" type="card" height="400px">
    <el-carousel-item v-for="item in imgs" :key="item.id">
      <el-image :src="item.url" />
    </el-carousel-item>
  </el-carousel>
  <el-card class="announcement-board">
    <template #header>
      <span>公告栏</span>
    </template>
    <el-timeline>
      <el-timeline-item
        v-for="item in items"
        :key="item.id_one"
        :timestamp="item.date"
        placement="top"
      >
        <el-card>
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>
<script setup>
import { ref } from 'vue'
import lunbo1 from '../assets/lunbo1.jpg'
import lunbo2 from '../assets/lunbo2.jpg'
import lunbo3 from '../assets/lunbo3.jpg'

const imgs = [
  {
    id: '1',
    url: lunbo1
  },
  {
    id: '2',
    url: lunbo2
  },
  {
    id: '3',
    url: lunbo3
  }
]
const items = ref([
  { id_one: 1, date: '2024-05-15', title: '宠物健康养护指南', content: '' },
  { id_one: 2, date: '2024-06-24', title: '选择适合的宠物', content: '' }
  // 更多公告...
])
</script>

<style>
.announcement-board {
  margin: 30px;
}
</style>
